<template>
  <div>
    <div class="jingyuanfnegcais">
      <div class="main2 flex-col">
        <!-- 返回 -->
        <!-- 新增 -->
        <div class="header-line" v-show="isfh">
          <div class="fan">
            <el-row>
              <el-button type="primary" class="xinzeng" @click="fanhui">返回</el-button>
            </el-row>
            <div class="xztp">
              <form action class="xiugai">
                <div class="biaoti">
                  <span>标题</span>
                  <el-input v-model="biaoti" placeholder="请输入标题"></el-input>
                </div>
                <div class="tupian">
                  <span>图片</span>
         <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-change="changeFile"
                  :on-remove="handleRemove"
                  :auto-upload="false"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <span >添加图片</span>
                </el-upload>
                  <span class="tupian1">
                    轮播图: 建议尺寸：
                    <i style="color:#E30909; font-style:normal;">220*120</i>，支持png、jpg、jpeg格式
                  </span>
                </div>
                <div class="lianjie">
                  <span>链接</span>
                  <el-input v-model="dizhi" placeholder="请输入链接地址"></el-input>
                </div>
                <div class="anniu">
                  <el-button type="primary" class="zhuyao" @click="PostAddImg">确定</el-button>
                  <el-button type="info" plain class="quxiao" @click="prev()">取消</el-button>
                </div>
              </form>
            </div>
            <!-- 2 -->
          </div>
        </div>
        <!-- /返回 -->
        <!-- 编辑 -->
        <div class="header-line" v-show="isBianji">
          <div class="fan">
            <el-row>
              <el-button type="primary" class="xinzeng" @click="fanhui1">返回</el-button>
            </el-row>
            <div class="xztp">
              <form action class="xiugai">
                <div class="biaoti">
                  <span>标题</span>
                  <el-input v-model="sPicture" placeholder="请输入标题"></el-input>
                </div>
                <div class="tupian2">
                  <span class="tp">图片</span>
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                  >
                   <img :src="sPicUrl" width="220px" height="120px" class="avatar" />
                    <i
                      class="el-icon-plus"
                      style="font-size: 18px; color: rgb(153, 153, 153); line-height: 130px;"
                    >添加图片</i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="sPicUrl" alt />
                  </el-dialog>
                  <span class="tupian1">
                    轮播图: 建议尺寸：
                    <i style="color:#E30909; font-style:normal;">220*120</i>，支持png、jpg、jpeg格式
                  </span>
                </div>
                <div class="lianjie">
                  <span>链接</span>
                  <el-input v-model="sPicLink" placeholder="请输入链接地址"></el-input>
                </div>
                <div class="anniu">
                  <el-button type="primary" class="zhuyao" @click="PostUpdatePic">保存修改</el-button>
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- /编辑 -->

        <!-- 新增按钮-->
        <div v-show="isShow">
          <div class="header-line">
            <el-row>
              <el-button type="primary" class="xinzeng" @click="add">新增</el-button>
            </el-row>
          </div>
          <div class="box"></div>
       

          <div class="body-line" id="neirong">
            <div class="box" style="margin:0; padding:0;">
          <el-table
            :data="imageall"
            tooltip-effect="dark"
            style="width: 100%"
            @select="tabid(nUid)"
          >
            <el-table-column prop="sPicUrl" label="图片" width="260" align="center">
               <template slot-scope="scope">
        <img :src="scope.row.sPicUrl" class="head_pic"/>
    </template>
                 <!-- <img
                 width="220px"
                 height="120px"
                  :src="sPicUrl"  alt /> -->
            </el-table-column>
            <el-table-column prop="sPicture" label="标题" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="sPicLink" label="链接" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="操作" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span class="bj" @click="editor(scope.row)" >编辑</span>
                  <span>|</span>
                  <span  class="bj"  @click.prevent="PostDeletePic(scope.row)">删除</span>
                  <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span>此操作将永久删除该文件, 是否继续?</span>
          <span slot="footer" class="dialog-footer">
            <button class="button1" @click="dialogVisible = false">取 消</button>
            <button class="button2" type="primary" @click="PostDeletePic(scope.row)">确 定</button>
          </span>
        </el-dialog> -->
                </template>
              </el-table-column>
          </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Coolies from 'js-cookie'
export default {
  data () {
    return {
      dialogVisible:false,
      fileList: [],
      // 上传图片路径
      images: {},
      // 所有图片
      imageall: [],
      bianma: {},
      imageUrl: '',
      dialogImageUrl: '',
      disabled: false,
      dialogVisible: '',
      constants: {},
      sPicture: '',
      sPicLink: '',
      img: ' ',
      biaoti: ' ',
      dizhi: ' ',
      caozuo: '',
      img: '',
      sPicUrl: '',
      isShow: true,
      isfh: false,
      dialogImageUrl: '',
      dialogVisible: false,
      hidder: false,
      isBianji: false,
      list: [

      ],
      updateEmpObj: {
        img: ' ',
        biaoti: ' ',
        dizhi: ' ',
      },
    };
  },
  methods: {
    // 获取全部图片
    async GetAllImg () {
    const { data: res } = await this.$http.get('/api/picture/Get_Allpictures', {
        params: {
          innTid: 3
        }
      })
      console.log(res);
      this.imageall = res
      console.log(this.imageall);
    },


    // 添加图片
    async PostAddImg () {
          this.bianmass = Coolies.get('bianma')
      console.log(this.bianmass);
      var bmls = this.biamas
      console.log(bmls);
      // console.log(file.url)
      let formData = new FormData()
      formData.append('nTid', 3)
      formData.append('sPicUrl', this.images.img)
      formData.append('sPicLink', this.dizhi)
      formData.append('sPicture', this.biaoti)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/picture/Post_Addpicture', formData, config)
      console.log(res);
      let arrfengcai = { innTid: 3, sPicUrl: this.images.img, sPicture: this.biaoti, sPicLink: this.dizhi }//sPicture图片描述
      this.imageall.unshift(arrfengcai)
      this.$message({
          message: '添加成功',
          type: 'success'
        });
      // this.imageall
      this.isShow = true
      this.isfh = false
       
    },
    // 图片上传成功的回调
    changeFile (file, fileList) {
      console.log(file.url);
      this.images = { img: file.url }
      // console.log(images);
      var This = this;
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function (e) {
        this.result // 这个就是base64编码了
        console.log(this.result);
        // var biamas = this.result
        Coolies.set('bianma', this.result)
      }
    },
        // 编辑图片
     async PostUpdatePic () {
        console.log(this.bianma.bmss);
      let formData = new FormData()
      formData.append('nTid', 3)
      formData.append('nPicid', this.nPicid)
      formData.append('sPicLink', this.sPicLink)
      formData.append('sPicUrl', this.im)
      formData.append('sPicture', this.sPicture)
      formData.append('nState', 1)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/picture/Post_Updatepicture', formData, config)
      this.imageall = res;
      console.log(res);
      this.isShow = true;
      this.isBianji = false;
      this.GetAllImg ();
       this.$message({
          message: '修改成功',
          type: 'success'
        });
    },
    // 删除图片
    async PostDeletePic(row){
      this.dialogVisible=false
      this.nPicid=row.nPicid
      let formData = new FormData()
      formData.append('nPicid', this.nPicid)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/picture/Post_deletepicture', formData, config)
      console.log(res);
      this.GetAllImg ();
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
    },
        prev () {
      this.isShow = true;
      this.isfh = false;
    },
    add () {
      this.isShow = false;
      this.isfh = true;
    },
    fanhui () {
      this.isfh = false; 
      
      this.isShow = true;
    },
    fanhui1(){
   this.isBianji=false;
   this.isShow=true
     },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    xiugai () {
      this.isShow = true;
      this.isBianji = false;
    },
    del (delIndex) {
      let shanchu = confirm('确定删除吗？ ')
      if (shanchu) {
        this.list.splice(delIndex, 1)
      }
    },
    editor (row) { 
      this.isBianji = true;
      this.isShow = false;
      this.nPicid=row.nPicid;
      this.sPicUrl=row.sPicUrl;
      this.sPicLink=row.sPicLink;
      this.sPicture=row.sPicture;
    },

  },
  created () {
    this.GetAllImg()
  }
};
</script>
<style scoped lang="css" src="./assets/index.css" />
